<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { getDetail } from '../../api/detail'
import { reactive, ref, Ref } from 'vue';
import { iDetail } from '../../utils/detailType'
import { showImagePreview, showToast } from 'vant'
import { setCart } from '../../api/cart';
import { useUserStore } from '../../stores/user';
import { getCart } from '../../api/cart';
const route = useRoute()

const router = useRouter()

const user = useUserStore()

// console.log(route.params.proid);
// console.log(route.query.proid);

let state: { detail: iDetail } = reactive({
  detail: {}
})
let isShow = ref(true)

getDetail({ proid: String(route.query.proid) }).then(res => {
  res.data.data.banners = res.data.data.banners[0].split(',')
  // console.log(res.data.data);
  state.detail = res.data.data
  isShow.value = false
})


// 记录当前在哪张图片上
const currentCount: Ref<number> = ref(0)

function showImage() {
  showImagePreview({
    images: state.detail.banners,
    startPosition: currentCount.value,
    onChange(index: number) {
      // 当前图片预览的索引值
      // console.log(index);
      currentCount.value = index
    }
  })
}
// 轮播图每次切换后执行
function changeImage(index: number) {
  // index 是我们轮播图当前的索引值
  // console.log(index);

  setTimeout(() => {
    currentCount.value = index
  }, 200);

}
// 用来显示遮罩层用的
let show: Ref<boolean> = ref(false)

// 手动打开客服聊天界面
function showMsg() {
  // 打开聊天界面
  window._MEIQIA('showPanel');


  // 传递顾客信息
  window._MEIQIA('metadata', {
    address: '杭州市上城区九堡街道旺田商务中心', // 地址
    age: '99', // 年龄
    comment: '最新想干点什么', // 备注
    email: '337409100@qq.com', // 邮箱
    gender: '男', // 性别
    name: '涛涛', // 名字
    qq: '3337409100', // QQ
    tel: '18888888888', // 电话
    weibo: '337409100@qq.com', // 微博
    weixin: '18888888888', // 微信
    contact: '1', // 联系人
  });
}

// 添加购物车的功能
function addCartClick(): void {
  // 先要拿到所需参数
  // userid    proid   num
  // console.log(route.query.proid, user.userid, 1);

  if (user.loginState) {

    setCart({
      proid: String(route.query.proid),
      userid: user.userid,
      num: 1
    }).then(res => {
      // console.log(res.data.data);
      showToast({
        message: res.data.message
      })

      getCart({
        userid: user.userid
      }).then(res => {
        // console.log(res.data.data.length);
        carCount.value = res.data.data.length
      })

    })
  } else {
    router.push({
      path: '/login',
      query: {
        code: 'login'
      }
    })
  }

}

// 获取购物车数量
let carCount: Ref<number> = ref(0)
if (user.loginState) {
  getCart({
    userid: user.userid
  }).then(res => {
    // console.log(res.data.data.length);
    carCount.value = res.data.data.length
  })
}

</script>
<template>
  <div class="box">
    <header class="header">
      <span class="back" @click="$router.back()">
        <van-icon name="arrow-left" />
        返回
      </span>
      详情

    </header>

    <div class="content" v-if="isShow">
      <h1>内容正在加载中</h1>
      <van-skeleton :row="3" />
      <br>
      <van-skeleton avatar avatar-size="64" :row="1" />
      <br>
      <van-skeleton :row="4" />
      <br>
      <van-skeleton :row="2" />
    </div>

    <div class="content" v-else>
      <div class="my-detail-swipe">
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" @change="changeImage" :initial-swipe="currentCount" :autoplay="3000"
          @click="showImage" indicator-color="#f66">
          <van-swipe-item v-for="item in state.detail.banners" :key="item">
            <img :src="item" alt="">
          </van-swipe-item>
        </van-swipe>
        <!-- 视频播放的按钮 -->
        <div class="video-btn" @click="show = true">
          <van-icon name="play-circle-o" size="26" color="#f66" />
        </div>
      </div>

      <!-- 用来渲染商品详情数据用的 -->
      <div class="cell">
        <h2> {{ state.detail.proname }} </h2>
        <p>
          <span style="color:red">￥ {{ state.detail.originprice * state.detail.discount * 0.1 }}</span>
          &#x3000;
          <del>￥ {{ state.detail.originprice }}</del>
        </p>
        <p>{{ state.detail.brand }}</p>
        <p>{{ state.detail.category }}</p>
        <p class="desc">{{ state.detail.desc }}</p>
      </div>

      <!-- 播放视频用的遮罩层 -->
      <van-overlay :show="show" @click="show = false">
        <!-- 播放视频的标签 -->
        <!--
          autoplay: 设置打开后自动播放
          controls：视频播放器的操作工具栏的显示
          src：视频地址
         -->
        <video class="my-video" autoplay controls
          src="https://jvod.300hu.com/vod/product/2c13df8e-f7aa-489b-8b06-e7ef0439cf48/1460b9b5c0804fe7bec6ae0e5ddfbd0a.mp4"></video>
      </van-overlay>


      <!-- 底部的功能导航模块 -->
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" @click="showMsg" dot />
        <van-action-bar-icon icon="cart-o" text="购物车" @click="$router.replace('/cart')" :badge="carCount" />
        <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
        <van-action-bar-button type="warning" @click="addCartClick" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>
    </div>
  </div>
</template>
<style scoped lang="scss">
.header {
  position: relative;

  .back {
    position: absolute;
    left: 10px;
  }
}

.my-swipe .van-swipe-item {
  height: 380px;
  line-height: 380px;
  text-align: center;
}

.my-swipe img {
  width: 100%;
  height: 100%;
}

.cell {
  height: 3000px;
  padding: 10px;

  .desc {
    line-height: 30px;
    font-size: 14px;
  }
}

.my-detail-swipe {
  position: relative;
}

.video-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  width: 40px;
  text-align: center;
  border-radius: 20px;
}

.my-video {
  position: fixed;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
</style>
